import React from "react";
import {PojBaseData} from "@/api/Objects/PojTypes.ts";
import {createStyles} from "antd-style";

interface Props {
    pojInfoVo: PojBaseData
}

const useStyles = createStyles(({css, token}) => {
    const cardHeight = 200
    const cardHoverHeight = 300

    return {
        container: css`
            height: ${cardHeight}px;
            background-color: rgba(0, 0, 0, 0.2);
            display: flex;
            transition: all .2s ease-in-out;
            position: relative;
            z-index: 1;
            overflow: clip;
            
            :hover {
                transform: scale(1.2);
                z-index: 10;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
                cursor: pointer;
                
                .cover {
                    width: 100%;
                    filter: brightness(.6);
                }
                .content {
                    transform: translateX(-${cardHeight / 2}px);
                }
            }
            
            .cover {
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                transition: all .5s ease-in-out;
                height: ${cardHoverHeight}px;
                width: ${cardHeight}px;
                object-fit: cover;
                object-position: center;
            }
            
            .content {
                transition: all .5s ease-in-out;
                margin-left: ${cardHeight}px;
                padding: 5px;
                z-index: 1;
            }
        `
    }
})

const PojInfoCard: React.FC<Props> = ({pojInfoVo}) => {
    const styles = useStyles().styles;

    return (
        <div className={styles.container}>
            <img className="cover" src={pojInfoVo.coverLink} alt={pojInfoVo.name}/>
            <div className="content">
                <p>{pojInfoVo.name}</p>
                <p>{pojInfoVo.description}</p>
            </div>
        </div>
    )
}

export default PojInfoCard